import React from "react";
import { Button,Spin } from 'antd';
import { inject, observer } from "mobx-react";
import {WeaTableNew} from 'comsMobx';
import { WeaRightMenu,WeaTop,WeaTab,WeaLeftRightLayout,WeaAlertPage,WeaLocaleProvider} from 'ecCom';
import { TaskViewUrl } from '../../constants/task';
import route from '../../constants/route';
const WeaTable = WeaTableNew.WeaTable;
import TaskTypeList from './TaskTypeList';
import Condition from './Condition';
import './index.less';
const getLabel = WeaLocaleProvider.getLabel;

@inject("taskMonitorStore")
@observer
export default class TaskMonitor extends React.Component{
    constructor(props) {
        super();
        this.store = props.taskMonitorStore;
    }
  
    componentDidMount() {
        const { taskMonitorStore: store } = this.props;
        store.init();
        window.openEdcTaskFromTaskList = this.openTask
        window.openEdcTaskViewFromTaskList = this.openTaskView
    }

    componentWillReceiveProps(nextProps) {
        const { location: { key } } = this.props;
        const { location: { key: nextKey} } = nextProps;//
        if (key !== nextKey) {
            this.store.init();
        }
    }

    openTask = (id, nodeid) => {
        const { location: { query: params } } = this.props;
        window.open(`${TaskViewUrl}#/${route.view}?taskid=${id}&nodeid=${nodeid}&userid=${params.userid || ''}`);
        //window.open(`${TaskViewUrl}#/${route.view}?taskid=${id}&nodeid=${nodeid}&userid=${this.props.params.userid || ''}`);
    }
    openTaskView = (id) => {
        const { location: { query: params } } = this.props;
        window.open(`${TaskViewUrl}#/${route.view}?taskid=${id}&userid=${params.userid || ''}`);
        //window.open(`${TaskViewUrl}#/${route.view}?taskid=${id}&userid=${this.props.params.userid || ''}`);
    }

    render(){
        const {taskMonitorStore:store} = this.props
        const {tableStore,isRight,loading} = this.store;
        const menu = [{
            key: '1',
            icon: <i className='icon-coms-search' />,
            content: '搜索',
            onClick: store.search,
        },{
            key: '2',
            icon: <i className='icon-coms-delete' />,
            content: '删除',
            onClick: store.deleteTask,
        }]
        if (loading) {
            return <div className="h100" style={{ textAlign: 'center', paddingTop: '300px' }}><Spin size="large"/></div>
        }
        if (!isRight) {
            return <WeaAlertPage><div>{getLabel('506009','暂无权限')}</div></WeaAlertPage>
        }
        return(
            <div className=''>
                <WeaRightMenu
                    datas={menu}>
                    <div style={{ backgroundColor: '#fff' }}>
                        <WeaTop
                            title={'任务监控'}
                            iconBgcolor='#1a57a0'
                            icon={<i className='icon-coms02-Data-center' />}
                            loading={tableStore.loading}
                            showDropIcon={true}
                            dropMenuDatas={menu}
                            >
                            <WeaLeftRightLayout
                                leftWidth={300}
                                leftCom={<TaskTypeList store={store} />}
                            >
                            <WeaTab
                                keyParam="key"  //主键
                                countParam="key"
                                searchType={['base', 'advanced']}
                                onSearch={store.quickSearch}
                                onSearchChange={store.changeQuickSearchValue}
                                searchsBaseValue={store.quickSearchValue}
                                showSearchAd={store.conditionVisible}
                                setShowSearchAd={store.setConditionVisible}
                                buttonsAd={this.getConditionButtons()}
                                searchsAd={<Condition store={store} />}
                            />
                            <WeaTable comsWeaTableStore={tableStore}
                                register_table={()=>store.reloadTable }
                                needScroll={true}
                                hasOrder={true}
                                uniqueId={true}
                            />
                            </WeaLeftRightLayout>
                        </WeaTop>
                    </div>
                </WeaRightMenu>
            </div>
        )
    }
    getConditionButtons = () => {
        const { taskMonitorStore:store } = this.props;
        return [
            (<Button type="primary" onClick={store.search}>{getLabel('506011','搜索')}</Button>),
            (<Button type="ghost" onClick={store.clearCondition}>{getLabel('506012','重置')}</Button>),
            (<Button type="ghost" onClick={store.setConditionVisible.bind(this, false)}>{getLabel('506013','取消')}</Button>)
        ]
    }

}